<template>
  <view class="content_box">
    <scroll-view scroll-y style="height: calc(100vh - 100rpx)">
      <view class="li_box" v-for="item in list">
        <view class="card_green_box" @click="lookInfo(item)">
          <view class="card_title_box">
            <view>需求编号：{{ item.requirementNo }}</view>
            <view class="card_tag_green">手工单</view>
          </view>
          <u-line color="#c2c9c4" />
          <view style="margin-top: 10rpx" class="card_li_box">委托人：张明年</view>
          <view class="card_li_box">实验时间:{{ item.reason }}</view>
          <view class="card_li_box">项目名称:{{ item.itemName }}</view>
          <view class="card_li_box">原料属性:{{ item.rawMaterialProperty }}</view>
          <view class="card_li_box">样品来源:{{ item.sampleSource }}</view>
          <view class="card_li_box">发起理由:{{ item.reason }}</view>
          <u-line color="#c2c9c4" />
          <view class="btn_green_box">需求详情</view>
        </view>
      </view>
    </scroll-view>
    <view class="fixed_btn_green_box" @click="addDemand">
      <view
        class="btn_green_box"
        style="width: calc(100% - 40rpx); margin-top: 0"
        >新增需求</view
      >
    </view>
  </view>
</template>
<script>
import { requirementList } from '../api/api.js';
export default {
    data() {
      return {
        list: [],
      };
    },
    methods: {
      funList() {
        requirementList().then((res) => {
          console.log(res.data, "123");
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        });
      },
      lookInfo(i){
        uni.setStorageSync('demandDetail', i)
        uni.navigateTo({
           url: '/pagesExpert/index/viewRequirements?flag=1'
        });    
      },
      addDemand(){
        uni.navigateTo({
           url: '/pagesExpert/index/viewRequirements?flag=2'
        });  
      }
    },
   
    onLoad() {},
    onShow() {
      this.funList();
    },
  };
</script>
<style lang="scss" scoped>
.content_box {
  width: 100vw;
  min-height: 100vh;
  background-color: #e3ede2;
  .li_box {
    width: 100vw;
    padding: 20rpx;
    box-sizing: border-box;
    .card_green_box {
      padding: 20rpx;
      background-color: #b9e2c7;
      color: #1b9c46;
      border-radius: 10rpx;
      font-size: 28rpx;
      .card_title_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        font-weight: 700;
        .card_tag_green {
          background-color: #1b9c46;
          color: #fff;
          padding: 5px 8px;
          font-size: 24rpx;
          border-radius: 8rpx;
        }
      }
      .card_li_box {
        margin-bottom: 10rpx;
        font-weight: 700;
      }
    }
  }
  .btn_green_box {
    width: 100%;
    height: 80rpx;
    border-radius: 14rpx;
    background-color: #1b9c46;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 20rpx;
  }
  .fixed_btn_green_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120rpx;
    background-color: #e3ede2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
